import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Modal, Form, Input, message, Select } from 'antd'
import PropTypes from 'prop-types'
const { Item } = Form
const { TextArea } = Input
const { Option } = Select
const col = { flex: '100px' }
class SeriesModal extends Component {
  state = {
    dictionaries: {} // 枚举字典
  }

  formRef = React.createRef()

  // 获取枚举的字典值
  getDictionary () {
    const hide = message.loading('加载中', 120)
    this.$get('/api/xapc/dictionary', {
      types: '系列案标签'
    }).then(res => {
      hide()
      if (res.status === 1) {
        // 设置枚举字典
        const dictionaries = this.formatDictionaries(res.data)
        this.setState({
          dictionaries
        })
      } else {
        message.error(res.message)
      }
    }).catch(() => hide())
  }

  // 格式化枚举字典
  formatDictionaries (dictionaries = []) {
    const result = {}
    dictionaries.forEach(d => {
      result[d.type] = d.list
    })
    return result
  }

  componentDidMount () {
    this.getDictionary()
  }

  render () {
    const { data, caseList } = this.props
    const { dictionaries } = this.state
    const tags = dictionaries['系列案标签'] || []
    return (
      <Modal
        title={data.id ? '修改系列案' : '创建系列案'}
        open={this.props.visible}
        width={600}
        destroyOnClose
        maskClosable={false}
        onCancel={() => this.props.hide()}
        onOk={() => this.formRef.current.submit()}
      >
        <Form labelCol={col} ref={this.formRef} initialValues={data} onFinish={d => this.props.onFinish(d)}>
          <Item name='id' noStyle><span /></Item>
          <Item label='案件数'>
            <span>{caseList.length} 件</span>
          </Item>
          <Item name='tag' label='标签' rules={[{ required: true, message: '标签不能为空' }]}>
            <Select style={{ width: '100%' }} placeholder='请选择仲裁程序' disabled={this.state.isModify || this.state.isFiled} allowClear>
              {tags.map(li => (
                <Option key={li.title} value={li.title}>{li.title}</Option>
              ))}
            </Select>
          </Item>
          <Item name='remark' label='备注'>
            <TextArea type='text' rows={3} placeholder='请输入备注' />
          </Item>
        </Form>
      </Modal>
    )
  }
}

SeriesModal.propTypes = {
  visible: PropTypes.bool,
  data: PropTypes.object,
  hide: PropTypes.func,
  onFinish: PropTypes.func,
  caseList: PropTypes.array
}

SeriesModal.defaultProps = {
  visible: false,
  data: {},
  hide: () => {},
  onFinish: () => {},
  caseList: []
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(SeriesModal)
